<template>
    <div id='banner-background' :style="{backgroundImage: 'url(' + currentBanner + ')'}"></div>
    <div id="banner" class="bg-blur">
        <div class="banner">
            <img :src="currentBanner" alt="" class="banner-content">
            <img src="../../assets/download.png" alt="" class="download">
            <ul class="order">
                <li v-for="(item,index) in bannerUrl" :key="index" :class="{'banner-active':currentIndex == index}"
                    @click='onCurrent(index)'></li>
            </ul>
            <div class="banner-previous" :class="{'jump': isPrevious}" @mouseenter='inPrevious' @mouseout='outPrevious'
                @click='jumpPrevious'>
                &lt;</div>
            <div class="banner-next" :class="{'jump': isNext}" @mouseenter='inNext' @mouseout='outNext'
                @click='jumpNext'>&gt;</div>
        </div>
    </div>
</template>

<script>
    import { getBanner } from '@/api/home'

    export default {
        name: 'Banner',
        data() {
            return {
                bannerUrl: [],
                currentBanner: '',
                timer: null,
                currentIndex: 0,
                isPrevious: false,
                isNext: false,

            }
        },
        created() {
            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
            clearInterval(this.timer)
            this.timer = null

            //接口获取轮播图数据
            getBanner().then(res => {
                for (var i = 0; i < res.data.banners.length; i++) {

                    this.bannerUrl.push(res.data.banners[i].imageUrl)
                }
                this.currentBanner = this.bannerUrl[0]
            }),
                this.setTimer()
        },
        methods: {
            //轮播图定时器
            setTimer() {
                if (this.timer == null) {
                    //设置两秒一播
                    this.timer = setInterval(() => {
                        this.currentIndex++;
                        this.currentBanner = this.bannerUrl[this.currentIndex]
                        if (this.currentIndex == this.bannerUrl.length) {
                            this.currentIndex = 0
                            this.currentBanner = this.bannerUrl[0]
                        }
                    }, 2000)
                }
            },

            //点击圆点序列跳转到相应轮播图
            onCurrent(index) {
                //清除定时器
                clearInterval(this.timer)
                this.timer = null
                //根据点击序列设定当前序号和设定对应轮播图
                this.currentIndex = index;
                this.currentBanner = this.bannerUrl[this.currentIndex]
                //再启用定时器
                this.setTimer()
            },

            inPrevious() {
                this.isPrevious = true
                this.isNext = false
            },

            outPrevious() {
                this.isPrevious = false
                this.isNext = false
            },

            inNext() {
                this.isNext = true
                this.isPrevious = false
            },

            outNext() {
                this.isNext = false
                this.isPrevious = false
            },

            jumpPrevious() {
                //清除定时器
                clearInterval(this.timer)
                this.timer = null
                if (this.currentIndex != 0) {
                    this.currentIndex -= 1
                    this.currentBanner = this.bannerUrl[this.currentIndex]
                    //再启用定时器
                    this.setTimer()
                } else {
                    this.currentIndex = 0
                    //再启用定时器
                    this.setTimer()
                }
            },

            jumpNext() {
                //清除定时器
                clearInterval(this.timer)
                this.timer = null
                if (this.currentIndex != this.bannerUrl.length - 1) {
                    this.currentIndex += 1
                    this.currentBanner = this.bannerUrl[this.currentIndex]
                    //再启用定时器
                    this.setTimer()
                } else {
                    this.currentIndex = 0
                    this.currentBanner = this.bannerUrl[0]
                    //再启用定时器
                    this.setTimer()
                }
            }
        },

    }
</script>

<style>
    #banner {
        height: 284px;
        width: 100%;
        border: 1px solid #ccc;
        border-top:none;
    }

    #banner-background {
        position: absolute;
        height: 282px;
        width: 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 200% 200%;
        filter: blur(8px);
    }

    .banner {
        height: 100%;
        width: 1260px;
        margin: auto;
        position: relative;
    }

    .banner-content {
        height: 284px;
        width: 728px;
        margin-left: 120px;
        border: 1px solid #ccc;
        border-bottom: none;
        border-top: none;
    }

    .download {
        height: 284px;
        width: 283px;
        background-size: 100% 100%;
        border: 1px solid #ccc;
        border-left: none;
        border-bottom: none;
        border-top: none;
    }

    .order {
        position: absolute;
        bottom: -5px;
        left: 350px;
    }

    .order li {
        float: left;
        margin-left: 20px;
        color: #ccc;
        cursor: pointer;
    }

    .banner-active {
        color: rgb(194, 12, 12) !important;
    }

    .banner-previous {
        height: 100px;
        width: 52px;
        position: absolute;
        font-size: 70px;
        color: #ccc;
        left: 40px;
        top: 30%;
        cursor: pointer;
        line-height: 100px;
        text-align: center;
    }

    .banner-next {
        height: 100px;
        width: 52px;
        position: absolute;
        font-size: 70px;
        color: #ccc;
        right: 40px;
        top: 30%;
        cursor: pointer;
        line-height: 100px;
        text-align: center;
    }

    .jump {
        background: rgb(136, 136, 136, 0.5)
    }
</style>